<template>
  <div v-loading="loading" class="product-main">
    <div class="left-main fl">
      <div class="category-tree-container">
        <el-scrollbar style="height: 100%" class="hid-scrollbar-x">
          <el-tree
            ref="categoryTree"
            :data="categoryTreeOptions"
            :props="categoryTreeProps"
            :expand-on-click-node="false"
            :highlight-current="true"
            node-key="id"
            default-expand-all
            @node-click="handleTree"
          >
            <span slot-scope="{ node, data }">
              <span style="width: 100%; padding-right: 10px">{{
                node.label
              }}</span>
            </span>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
    <div class="right-main">
      <div class="scrollbar-container">
        <el-scrollbar style="height: 100%" class="hid-scrollbar-x">
          <!-- filter start -->
          <div class="filter-container">
            <el-form
              ref="filterForm"
              :model="filterForm"
              inline
              label-width="100px"
              size="small"
            >
              <div>
                <!-- <el-form-item prop="goodsType" label="商品类型：">
                  <el-select
                    v-model="filterForm.goodsType"
                    placeholder="请选择"
                  >
                    <el-option label="全部" value="all" />
                    <el-option
                      v-for="(item, key) in goodsTypeOptions"
                      :key="key"
                      :label="item"
                      :value="key"
                    />
                  </el-select>
                </el-form-item> 这一期用不上2022/8/11 -->

                <el-form-item prop="title" label="商品名称：">
                  <el-input v-model="filterForm.title" />
                </el-form-item>
                <el-form-item prop="goodsNo" label="商品编码：">
                  <el-input v-model="filterForm.goodsNo" />
                </el-form-item>
                <el-form-item prop="barCode" label="国际条码：">
                  <el-input v-model="filterForm.barCode" />
                </el-form-item>
              </div>
              <div>
                <el-form-item label=" ">
                  <el-button
                    type="primary"
                    round
                    @click="search"
                  >查 询</el-button>
                  <el-button round @click="reset">重 置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <!-- filter end -->

          <!-- table start -->
          <div class="table-container">
            <el-table
              :data="list"
              border
              stripe
              style="width: 100%; height: 50vh; overflow: scroll"
              size="small"
              element-loading-text="加载中"
              empty-text="暂无数据"
            >
              <el-table-column prop="title" label="商品标题" />
              <el-table-column prop="goodsNo" label="商品编码" />
              <el-table-column prop="barCode" label="国际条码" />
              <el-table-column prop="description" label="价格/元">
                <template slot-scope="scope">
                  <div>最低价格：{{ scope.row.minPrice / 100 }}</div>
                  <div>最高价格：{{ scope.row.maxPrice / 100 }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="defaulted" label="商品类型">
                <template slot-scope="scope">{{
                  goodsTypeOptions[scope.row.goodsType]
                }}</template>
              </el-table-column>
              <el-table-column prop="categoryName" label="商品类目">
                <template slot-scope="scope">
                  <span v-if="scope.row.categoryName">
                    <span
                      v-for="(item, index) in scope.row.categoryName"
                      :key="index"
                    >
                      {{ item }}
                      <span
                        v-if="index + 1 !== scope.row.categoryName.length"
                      >/</span>
                    </span>
                  </span>
                  <span v-else>无</span>
                </template>
              </el-table-column>
              <el-table-column prop="brand" label="品牌">
                <template slot-scope="scope">
                  <span v-if="scope.row.brand">{{ scope.row.brand }}</span>
                  <span v-else>无</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleChooseGood(scope.row)"
                  >选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <pagination-direction
              v-if="paginationConfig.total !== 0"
              :config="paginationConfig"
              @sizeschange="sizesChange"
              @pagechange="pageChange"
            />
          </div>
          <!-- table end -->
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import { productList, delProduct } from '@/views/wxaMallModule/api/product'
import { categoryTree } from '@/views/wxaMallModule/api/category'
export default {
  props: {
    modeInfo: {
      type: Object
    }
  },
  data() {
    return {
      // 配置
      goodsTypeOptions: {
        100: '实物商品',
        101: '配件商品',
        200: '卡/券包'
        // 300: "同城配送",
      },
      statusOptions: {
        0: '已下架',
        1: '已上架'
      },
      categoryTreeOptions: [],
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      categoryTreeProps: {
        label: 'title'
      },
      // 状态
      loading: false,
      // 数据
      filterForm: {
        goodsType: 'all',
        barCode: '',
        brandId: '',
        categoryId: 'all',
        goodsNo: '',
        status: 'all',
        title: ''
      },
      list: []
    }
  },
  computed: {
    refresh() {
      return this.modeInfo
    }
  },
  watch: {
    refresh(val) {
      if (val.data === 'refresh') {
        this.fetchData()
      }
    }
  },
  created() {},
  mounted() {
    this.fetchData()
    this.getCategoryOptions()
  },
  methods: {
    /**
     * 数据组
     */
    // 获取列表
    fetchData(
      pageNum = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = pageNum
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      params.goodsType = '100' // 这一期只能查询到实物商品 2022/8/11
      // if (
      //   params.categoryId.length === 0 ||
      //     (params.categoryId.length === 1 && params.categoryId[0] === 0)
      // ) {
      //   params.categoryId = ''
      // } else {
      //   params.categoryId = params.categoryId[params.categoryId.length - 1]
      // }
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.loading = true
      productList(params)
        .then((res) => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
          this.$refs.categoryTree.setCurrentKey(this.filterForm.categoryId)
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    // 获取类目tree
    getCategoryOptions() {
      return new Promise((resolve, reject) => {
        categoryTree().then((res) => {
          // this.categoryTreeOptions = [
          //   {
          //     categoryNo: '',
          //     children: undefined,
          //     id: 0,
          //     parentId: 0,
          //     ranking: 0,
          //     title: '全部'
          //   }
          // ].concat(this.formatTreeData(res.data))
          this.categoryTreeOptions = [
            {
              categoryNo: '',
              children: this.formatTreeData(res.data),
              id: 'all',
              parentId: 0,
              ranking: 0,
              title: '全部类目'
            }
          ]
          this.$nextTick(() => {
            this.$refs.categoryTree.setCurrentKey(this.filterForm.categoryId)
          })
        })
      })
    },

    // 递归children设置空
    formatTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          data[i].children = undefined
        } else {
          this.formatTreeData(data[i].children)
        }
      }
      return data
    },

    /**
     * 按钮组
     */
    // 查询
    search() {
      this.fetchData(1)
    },

    // 重置
    reset() {
      this.$refs.filterForm.resetFields()
    },

    // 编辑
    handleChooseGood(row) {
      this.$emit('choose', row)
    },

    // 点击tree
    handleTree(data) {
      if (data.id === this.filterForm.categoryId) {
        return
      }
      this.filterForm.categoryId = data.id
      this.fetchData()
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.left-main {
  padding: 10px;
  border-radius: 5px;
  margin-right: 10px;
  background-color: #fff;
  min-width: 180px;
  font-size: 14px;
  .category-tree-container {
    height: calc(100vh - 260px);
  }
  .btn-group {
    height: 50px;
  }
  ::v-deep
    .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: $primary !important;
    color: #fff;
  }
}
.right-main {
  overflow: hidden;
  padding: 20px 10px;
  border-radius: 5px;
  background-color: #fff;
  .scrollbar-container {
    height: calc(100vh - 230px);
  }
  /* 查询 */
  .filter-container {
    .el-input,
    .w-300,
    .el-select {
      width: 300px;
    }
  }
}
</style>
